<template>
  <div>
    <van-tabs v-model="active" sticky animated swipeable class="van_tabs">
      <van-tab title="福利">
        <tab-welfare :gameinfo="gameinfo"/>   
      </van-tab>
      <van-tab title="活动">
        <tab-active :gameinfo="gameinfo"/>
      </van-tab>
      <van-tab title="礼包">
        <tab-gift-card :gameinfo="gameinfo" @used-click="usedClick"/>
      </van-tab>
      <van-tab title="点评">
        <tab-comment 
          :gameinfo="gameinfo" 
          :commentlist="commentlist"
          @review-activities="reviewActivities"/>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import TabActive from '../tab/TabActive.vue'
import TabComment from '../tab/TabComment.vue'
import TabGiftCard from '../tab/TabGiftCard.vue'
import TabWelfare from '../tab/TabWelfare.vue'
export default {
  components: {
    TabWelfare, 
    TabActive, 
    TabGiftCard, 
    TabComment, 
  },
  props: {
    gameinfo: {
      type: Object,
      default() {
        return {}
      }
    },
    commentlist: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      active: 0,
    }
  },
  methods: {
    //点击领取礼包
    usedClick(index) {
      this.$emit('used-click', index)
    },
    //点评活动
    reviewActivities() {
      this.$emit('review-activities')
    },
  },
}
</script>

<style lang="less" scoped>
.van_tabs {
  position: sticky;
  top: 1.173333rem;
}

</style>